
import { Button, Form, Input, Mask, NavBar,  } from "antd-mobile";
import { useDispatch, useSelector } from "react-redux";
import {addPerson,delPerson} from './store/personList'
import { useState } from "react";
import axios from "axios";
export function App() {
  const [form] = Form.useForm();
  const personList = useSelector((state) => state.personList);
  const dispatch = useDispatch();
  const [visible, setVisible] = useState(false);
  const handleDelete = (v) => {
    dispatch(delPerson(v));
  };
  const onFinish = (values) => {
    setVisible(false);
    dispatch(addPerson(values));
  };

  const handleORC = () => {
    const input = document.createElement("input");
    input.type = "file";
    input.click();

    input.onchange = async () => {
      const file = input.files[0];
      const formData = new FormData();
      formData.append("file", file, file.name);
      const resp = await axios.post("/api/orc/upload/image", formData);
      console.log(resp.data.data);
      form.setFieldsValue(resp.data.data);
    };
  };

  return (
    <div>
      <NavBar>乘车人</NavBar>
      <h2>车票信息</h2>
      <h2>
        <span>乘车人</span>
        <span onClick={() => setVisible(true)}>添加</span>
      </h2>
      <div>
        {personList?.map((v) => {
          return (
            <div
              key={v.id}
              style={{
                display: "flex",
                justifyContent: "space-between",
                height: 30,
                alignItems: "center",
              }}
            >
              <span>姓名： {v.name}</span>
              <span>身份证:{v.code}</span>
              <Button
                color="danger"
                size="mini"
                onClick={() => handleDelete(v)}
              >
                删除
              </Button>
            </div>
          );
        })}
      </div>
     
   
      {visible && (
        <Mask
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div style={{ width: "80vw", background: "#fff" }}>
            <h1 style={{ textAlign: "center" }}>添加乘车人</h1>
            <Form
              form={form}
              layout="horizontal"
              onFinish={onFinish}
              footer={
                <div>
                  <Button type="submit" block color="primary">
                    提交
                  </Button>
                  <Button
                    type="button"
                    block
                    color="danger"
                    onClick={() => handleORC()}
                    style={{ marginTop: 10 }}
                  >
                    ORC识别身份证
                  </Button>
                </div>
              }
            >
              <Form.Item name="name" label="姓名">
                <Input></Input>
              </Form.Item>
              <Form.Item name="code" label="身份证">
                <Input></Input>
              </Form.Item>
            </Form>
          </div>
        </Mask>
      )}
    </div>
  );
}

export default App;
